import validate from 'wechat-validate'

Page({
  // 通过 behaviors 注入 validate 方法
  behaviors: [validate],
  data: {
    currentDate: Date.now(),
    houseLayerVisible: false,
    repairLayerVisible: false,
    dateLayerVisible: false,
    houseList: [],
    repairItem: [],
    attachment: [],
    // 自己准备的数据
    houseId: '',
    houseInfo: '',
    repairItemId: '',
    repairItemName: '',
    mobile: '',
    description: '',
    appointment: '',
  },
  // 定义表单数据的验证规则
  rules: {
    houseId: [{ required: true, message: '请选择保修房屋' }],
    repairItemId: [{ required: true, message: '请选择保修内容' }],
    mobile: [
      { required: true, message: '请填写手机号码!' },
      { pattern: /^1[3-8]\d{9}$/, message: '请检查手机号码是否正确!' },
    ],
    appointment: [{ required: true, message: '请选择预约日期' }],
    description: [{ required: true, message: '请填写问题描述' }],
  },
  openHouseLayer() {
    this.setData({ houseLayerVisible: true })
  },
  closeHouseLayer() {
    this.setData({ houseLayerVisible: false })
  },
  openRepairLayer() {
    this.setData({ repairLayerVisible: true })
  },
  closeRepairLayer() {
    this.setData({
      repairLayerVisible: false,
    })
  },

  openDateLayer() {
    this.setData({ dateLayerVisible: true })
  },
  closeDateLayer() {
    this.setData({ dateLayerVisible: false })
  },
  // 提交表单，校验通过后跳转到维修列表页
  async goList() {
    // 验证码 rules 中定义的全部数据
    const isAllValid = this.validate()
    if (!isAllValid) return
    // 提取接口需要的数据 - 从 data 中提取
    const { id, houseId, repairItemId, mobile, appointment, description, attachment } = this.data
    // 调用接口 - 注意参数必须按后端的参数要求传递，不能多，也不能少
    await wx.http.post('/repair', {
      id,
      houseId,
      repairItemId,
      mobile,
      appointment,
      description,
      attachment,
    })
    // 跳转到报修列表页面
    wx.redirectTo({
      url: '/repair_pkg/pages/list/index',
    })
  },
  // 页面加载时触发
  onLoad(query) {
    // 获取审核通过的房屋列表 - 用于选择房屋
    this.getHouseList()
    // 获取报修项目列表 - 用于选择报修项目
    this.getRepairList()
    // 判断是否有 id，如果有 id，说明是修改操作
    if (query.id) {
      // 动态更新页面标题
      wx.setNavigationBarTitle({ title: '修改报修信息' })
      // 根据 id 获取报修信息
      this.getDetail(query.id)
    }
  },
  // 查询我能报修的房屋
  async getHouseList() {
    const res = await wx.http.get('/house')
    this.setData({
      houseList: res.data,
    })
  },
  // 选择房屋
  onSelectHouse(e) {
    const { id, name } = e.detail
    this.setData({
      // 考虑到提交时,后端需要的是houseId,所以这里用houseId
      houseId: id,
      houseInfo: name,
    })
  },
  // 获取报修项目
  async getRepairList() {
    const res = await wx.http.get('/repairItem')
    // 保存保修列表属于,用于渲染 action-sheet
    this.setData({
      repairItem: res.data,
    })
  },
  // 选择保修项目
  onSelectRepair(e) {
    const { id, name } = e.detail
    this.setData({
      // 考虑到提交时,后端需要的是repairItemId,所以这里用repairItemId
      repairItemId: id,
      repairItemName: name,
    })
  },
  // 选择日期 - 点击确定
  onConfirmDate(e) {
    this.setData({
      appointment: wx.utils.formatDate(e.detail),
      dateLayerVisible: false,
    })
  },
  // 文件读取完成后 - 上传图片
  onAfterRead(e) {
    // 上传文件的信息
    const { file } = e.detail
    // 调用 API 实现文件上传
    wx.uploadFile({
      url: wx.http.baseURL + '/upload',
      name: 'file',
      filePath: file.url,
      header: {
        Authorization: `Bearer ${getApp().token}`,
      },
      success: (res) => {
        // 处理返回的 json 数据
        const response = JSON.parse(res.data)
        // 检测接口是否调用成功
        if (response.code !== 10000) return wx.utils.toast('文件上传失败!')
        // 先获取原来已经上传的图片
        const { attachment } = this.data
        // 追加新的上传的图片
        attachment.push(response.data)
        // 渲染数据
        this.setData({
          attachment,
        })
      },
    })
  },
  // 删除图片
  onDelete(e) {
    // event.detail.index: 删除图片的序号值
    this.setData({
      attachment: this.data.attachment.filter((v, i) => i !== e.detail.index),
    })
  },
  // 获取报修信息
  async getDetail(id) {
    if (!id) return
    // 请求数据接口
    const res = await wx.http.get(`/repair/${id}`)
    // 保存信息，用于渲染页面
    this.setData(res.data)
  },
})
